<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			  function clickinner(){
				console.log("小的div被点击了");
	
					//阻止事件冒泡
					//获取事件对象
				let event = window.event;
				console.log(event);
				// 使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。
				event.stopPropagation();
				
	
			}
			function clickouter(){
				console.log("外层的div被点击了");
			}
			
			function preventDefault(){
				let event = window.event;
				// 使用event.preventDefault()可以取消默认事件
				console.log("组织事件的默认行为")
				event.preventDefault();
			}
			
			
			//接受用户输入，并只能输入数字
			function keyDown(){
				let event = window.event;
				console.log(event);
				
				let inpt = event.key;
				if(!(inpt>=0 && inpt<=9)){
					event.preventDefault();
				}
			}
			
		</script>
	</head>
	<body>
		
		<div onclick="clickouter()"  style="width: 300px;height: 300px; border:1px solid red ;"  >
		
			<div onclick="clickinner()"  style="width: 300px;height: 150px; background-color: #72a0c9 ;"  >    

			</div>


		</div>
		
		<a href="http://www.baidu.com" onclick="preventDefault()">百度</a>
		
		
		
		<input type="text" name="" id="" value=""  onkeydown="keyDown()" onkeyup=""  onkeypress=""/>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
